<%--
  Created by IntelliJ IDEA.
  User: chen
  Date: 29/03/2018
  Time: 12:17 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>
<html>
<head>
  <meta charset="utf-8">
  <title>用户登陆</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- CSS -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/supersized.css">
  <link rel="stylesheet" href="css/style.css">
  <title>用户登录</title>
</head>
<body oncontextmenu="return false">
<div class="page-container">
  <h1>用户登录</h1>
  <form action="index.jsp" method="post">
    <div>
      <input type="text" name="username" class="username" placeholder="用户名" autocomplete="off"/>
    </div>
    <div>
      <input type="password" name="password" class="password" placeholder="输入密码" oncontextmenu="return false" onpaste="return false" />
    </div>
    <button id="submit" type="submit">登录</button>
  </form>
  <div class="connect">
  </div>
</div>
<div class="alert" style="display:none">
  <h2>消息</h2>
  <div class="alert_con">
    <p id="ts"></p>
    <p style="line-height:70px"><a class="btn">确定</a></p>
  </div>
</div>
如果您还没有注册，请单击<a href="register.jsp">这里</a>注册！

<!-- Javascript -->
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<script>
    $(".btn").click(function(){
        is_hide();
    })
    var u = $("input[name=username]");
    var p = $("input[name=password]");
    $("#submit").live('click',function(){
        if(u.val() == '' || p.val() =='')
        {
            $("#ts").html("用户名或密码不能为空~");
            is_show();
            return false;
        }
        else{
            var reg = /^[0-9A-Za-z]+$/;
            if(!reg.exec(u.val()))
            {
                $("#ts").html("用户名错误");
                is_show();
                return false;
            }
        }
    });
    window.onload = function()
    {
        $(".connect p").eq(0).animate({"left":"0%"}, 600);
        $(".connect p").eq(1).animate({"left":"0%"}, 400);
    }
    function is_hide(){ $(".alert").animate({"top":"-40%"}, 300) }
    function is_show(){ $(".alert").show().animate({"top":"45%"}, 300) }
</script>
</body>
</center>
</html>